<!doctype html>
<html lang='en' ng-app>
<head>
    <title>Validate me!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <style type="text/css">
        .ng-invalid {
            border-color: red;
        }
    </style>
</head>

<body>
<h1>Sign Up</h1>

<form name='addUserForm' ng-controller="AddUserController">
    <div ng-show='message'>{{message}}</div>
    <div>First name: <input name='firstName' ng-model='user.first' required></div>
    <div>Last name: <input ng-model='user.last' required></div>
    <div>Email: <input type='email' ng-model='user.email' required></div>
    <div>Age: <input type='number'
                     ng-model='user.age'
                     ng-maxlength='3'
                     ng-min='1'></div>
    <div>
        <button ng-click='addUser()'
                ng-disabled='!addUserForm.$valid'>Submit
        </button>
    </div>
</form>
<script>
    function AddUserController($scope) {
        $scope.message = '';

        $scope.addUser = function () {
            // TODO for the reader: actually save user to database...
            $scope.message = 'Thanks, ' + $scope.user.first + ', we added you!';
        };
    }
</script>
</body>
</html>
